<template>
	<div class="app">
		<myNavbar title="账户与安全" backTyep="1"></myNavbar>
		<div class="up">
			<div class="up-trade" >
				<text class="up-trade-text">{{"账户名"}}</text>
        <text class="up-trade-txt">{{userInfo.nickname}}</text>
      </div>

      <div class="up-site" v-if="userInfo.mobile == null"  @click="toBindingMobile()">
        <text class="up-site-text">{{"绑定手机"}}</text>
        <div class="up-location">
          <text class="up-location-txt">{{"请绑定手机号码"}}</text>
          <image class="up-location-img" src="https://rzico.oss-cn-shenzhen.aliyuncs.com/dinner/wode/wode-gengduo.png"></image>
        </div>
      </div>
      <div class="up-site" v-if="userInfo.mobile">
        <text class="up-site-text">{{"绑定手机"}}</text>
        <div class="up-location">
          <text class="up-trade-txt">{{userInfo.mobile}}</text>
        </div>
      </div>
      <div class="up-site" @click="toImmersionPage('changePassword')">
				<text class="up-site-text">{{"登录密码"}}</text>
				<div class="up-location">
					<text class="up-location-txt">{{"重置登录密码"}}</text>
					<image class="up-location-img" src="https://rzico.oss-cn-shenzhen.aliyuncs.com/dinner/wode/wode-gengduo.png"></image>
				</div>
			</div>
      <div class="up-site" @click="toChangePayment()">
        <text class="up-site-text">{{"支付密码"}}</text>
        <div class="up-location">
          <text class="up-location-txt">{{"重置支付密码"}}</text>
          <image class="up-location-img" src="https://rzico.oss-cn-shenzhen.aliyuncs.com/dinner/wode/wode-gengduo.png"></image>
        </div>
      </div>


      <div class="up-site" v-if="liaisonName == null"  @click="toEmergencyContact()">
        <text class="up-site-text">{{"绑定紧急联系人"}}</text>
        <div class="up-location">
          <text class="up-location-txt">{{"请绑定紧急联系人"}}</text>
          <image class="up-location-img" src="https://rzico.oss-cn-shenzhen.aliyuncs.com/dinner/wode/wode-gengduo.png"></image>
        </div>
      </div>
      <div class="up-site" v-if="liaisonMobile">
        <text class="up-site-text">{{"紧急联系人:"}}{{liaisonName}}</text>
        <div class="up-location">
          <text class="up-trade-txt">{{liaisonMobile}}</text>
        </div>
      </div>
      <div class="up-site-cancellation" @click="cancellationClick">
        <text  class="up-trade-txt-cancellation" style="color: black" >注销</text>
      </div>

    </div>

	</div>
</template>
<style scoped>
	.app {
		flex: 1;
		background-color: #f9f9f9;
	}

	.up {
		background-color: #FFFFFF;
		margin-top: 20px;
	}

	.up-trade {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		border-bottom-style: solid;
		border-bottom-color: #E8E8E8;
		border-bottom-width: 2px;
	}

	.up-trade-text {
		padding: 35px 0 35px 39px;
		font-size: 33px;
		font-weight: 400;
		color: #333333;
	}

	.up-trade-txt {
		font-size: 29px;
		font-weight: 500;
		color: #999999;
		padding: 35px 43px 35px 38px;
	}
  .up-trade-txt-cancellation{
    font-size: 32px;
    font-weight: 500;
    color: black;
    padding: 35px 43px 35px 38px;
  }

	.up-frame {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		border-bottom-style: solid;
		border-bottom-color: #E8E8E8;
		border-bottom-width: 2px;
	}

	.up-frame-txt {
		font-size: 33px;
		font-family: SourceHanSansCN;
		font-weight: 400;
		color: #333333;
		padding: 35px 0 35px 39px;
	}

	.up-encase {
		/*display: flex;*/
		/*flex-direction: row;*/
		/*justify-content: end;*/

	}

	.up-encase-txt {
		font-size: 29px;
		font-family: SourceHanSansCN;
		font-weight: 500;
		color: #999999;
		padding: 35px 0px 35px 0;
	}

	.up-encase-img {
		width: 13px;
		height: 23px;
		margin: 41px 41px 43px 24px;
	}

	.up-site {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		border-bottom-style: solid;
		border-bottom-color: #E8E8E8;
		border-bottom-width: 2px;
	}
  .up-site-cancellation{
    display: flex;
    flex-direction: row;
    justify-content: center;
    border-bottom-style: solid;
    border-bottom-color: #E8E8E8;
    border-bottom-width: 2px;
  }

	.up-site-text {
		font-size: 29px;
		font-family: SourceHanSansCN;
		font-weight: 400;
		color: #333333;
		padding: 35px 0 35px 39px;
	}

	.up-location {
		display: flex;
		flex-direction: row;
		justify-content: end;
	}

	.up-location-txt {
		font-size: 29px;
		font-family: SourceHanSansCN;
		font-weight: 500;
		color: #999999;
		padding: 35px 0px 35px 0;
	}

	.up-location-img {
		width: 13px;
		height: 23px;
		margin: 41px 41px 43px 24px;
	}

	.text {
		padding-top: 50px;
		padding-left: 40px;
		font-size: 29px;
		font-weight: 400;
		color: #666666;
	}

	.below {
		margin-top: 50px;
		height: 109px;
		background-color: #FFFFFF;
	}

	.below-txt {
		padding-left: 37px;
		padding-top: 8px;
		font-size: 33px;
		line-height: 33px;
		font-weight: 400;
		color: #333333;
	}
</style>
<style lang="css" src="../../../style/common.css" /></style>
<script>
    import myNavbar from "../../../components/myNavbar/myNavbar";
    import {getInfo, logout} from '../../../api/user'
    import {getInfo as memberGetInfo} from '../../../api/member'
    const umengPush = app.requireModule("eeui/umengPush");

    export default {
        components: {
            myNavbar,
        },
        data() {
            return {
                text: '开启验证后，每当有用户在新设备上登录您的账户，系统将对其身份认证',
                verify: true,
                userInfo:{},
              liaisonMobile:'',
              liaisonName:''
            }
        },
      pageResume: function (data) {
        var _this = this;
        if (_this.getGlobalData().token != null) {
          this.getGetInfo()
        }
      },

      methods: {
        cancellationClick(){
          logout().then(res=>{
            let globalData = []
            // globalData.token = ""
            // globalData.userInfo = ""
            // globalData.uuid = ""
            this.setGlobalData(globalData)
            eeui.openPage({
              url: `root://pages/index`,
              statusBarType: 'immersion',
              statusBarStyle: false
            });

          })

        },
        toEmergencyContact() {
            eeui.openPage({
              url: `root://pages/member/accountSecurity/emergencyContact`,
              params: {username: this.userInfo.username,mobile: this.userInfo.mobile},
              statusBarType: 'immersion',
              statusBarStyle: false
            });
          },
          toBindingMobile() {
            eeui.openPage({
              url: `root://pages/member/accountSecurity/bindingMobile`,
              params: {username: this.userInfo.username,mobile: this.userInfo.mobile},
              statusBarType: 'immersion',
              statusBarStyle: false
            });
          },
          toChangePayment(e) {
            if(this.userInfo.mobile){
              eeui.openPage({
                url: `root://pages/member/accountSecurity/ChangePayment`,
                params: {username: this.userInfo.username,mobile: this.userInfo.mobile},
                statusBarType: 'immersion',
                statusBarStyle: false
              });
            }else {
              eeui.confirm({
                title: "温馨提示",
                message: "请先绑定手机号码！",
                buttons: [{
                  title: "确定",
                  type: "positive"
                }]
              }, function (result) {});
              return;
            }


          },
          toImmersionPage(e) {
            if(this.userInfo.mobile){
              eeui.openPage({
                url: `root://pages/member/accountSecurity/${e}`,
                params: {username: this.userInfo.username,mobile: this.userInfo.mobile},
                statusBarType: 'immersion',
                statusBarStyle: false
              });
            }else {
              eeui.confirm({
                title: "温馨提示",
                message: "请先绑定手机号码！",
                buttons: [{
                  title: "确定",
                  type: "positive"
                }]
              }, function (result) {});
              return;
            }
            },
          newDeviceVerify(e) {
                console.info(e)
                this.verify = e.isActive
            },

			getGetInfo() {
			    getInfo().then(res => {
            let _userInfo = res.data.userInfo
            this.userInfo = _userInfo
            console.log("11111111111111111111111111111111111")
            console.log(this.userInfo)
			    })
        memberGetInfo().then(res=>{
          console.info("1111111111111")

          this.liaisonMobile = res.data.member.liaisonName
          this.liaisonName = res.data.member.liaisonMobile

          console.info(this.liaisonMobile )
          console.info(this.liaisonName )
        })
			}
        },
		created:function() {
			this.getGetInfo()
		},

	}
</script>
